<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style/indes.css">
  <link crossorigin="anonymous" href="https://lib.baomitu.com/docsify/latest/themes/vue.css" rel="stylesheet">
  <script src="./lib/index.umd.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    let sn = 0;
    const regxp = /\/\/hides[\w\W]+?\/\/hidee/g;

    window.$docsify = {
      loadSidebar: true,
      subMaxLevel: 2,
      executeScript: true,
      plugins: [
        function (hook) {
          hook.doneEach(function () {
            const demoBlock = [...document.querySelectorAll('.demo-block')];
            demoBlock.forEach(d => {
              const ct = d.querySelector('.tab-content');
              const canvas = d.querySelector('canvas');
              const { clientWidth: width, clientHeight: height } = ct;
              canvas.width = width;
              const ctx = {
                canvas,
                width,
                height
              }
              const js = d.querySelector('textarea').value;
              const fn = new Function(`
              const {canvas,width,height}=this;
              ${js};
              `)
              fn.call(ctx);
            })
          });
        },
      ],
      markdown: {
        renderer: {
          code(code) {
            const isDemo = /flashthem/g.test(code);
            if (!isDemo) {
              return this.origin.code.apply(this, arguments);
            }
            sn++;
            const codestr = this.origin.code.call(this, code.replace(regxp, ''), arguments[1], arguments[2]);
            const str = `<div class="demo-block">
                <textarea>${code}</textarea>
                <input checked type="radio" name="tab-${sn}" id="tab-${sn}-js"/>
                <label for="tab-${sn}-js">Result</label>
                <div class="tab-content">
                  <canvas height="400"/>
                </div>
                <input type="radio" name="tab-${sn}" id="tab-${sn}-canvas"/>
                <label style="left:100px" for="tab-${sn}-canvas">Code</label>
                <div class="tab-content">
                  ${codestr}
                </div>
              </div>`;
            return str;
          }
        }
      },
    }
  </script>
  <script src="https://lib.baomitu.com/docsify/latest/docsify.min.js"></script>
  <script crossorigin="anonymous" src="https://lib.baomitu.com/prism/latest/components/prism-typescript.min.js"></script>

</body>

</html>